<template>
  <div class="orgList-container">
    <div class="orgList-content">
      <page-header
        @add="add"
        type="orgPersonnelList"
        @reset="resetSeach"
        @searchChange="searchData"
      ></page-header>
      <pagination-table
        ref="ptable"
        :tableData="pageData.listData"
        @pagination="paginaChange"
      >
        <XMTableColumn label="名称" prop="doctorName"></XMTableColumn>
        <XMTableColumn label="手机号" prop="phone"></XMTableColumn>
        <XMTableColumn label="角色" prop="roleName"></XMTableColumn>
        <XMTableColumn label="创建时间" prop="createTime"></XMTableColumn>
        <XMTableColumn
          label="排序"
          prop="sequence"
          sortable="custom"
          width="80"
        ></XMTableColumn>
        <XMTableColumn
          label="状态"
          width="80"
          prop="statusTitle"
        ></XMTableColumn>
        <XMTableColumn label="操作" min-width="160">
          <template #default="scope">
            <el-button size="small" type="primary" @click="edit(scope.row)">
              编辑
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="sequenceChange(scope.row)"
            >
              排序
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="statuschange(scope.row)"
            >
              {{ scope.row.status === 0 ? '启用' : '禁用' }}
            </el-button>
          </template>
        </XMTableColumn>
      </pagination-table>
    </div>
    <el-dialog title="修改序号" v-model="isVisble" width="30%">
      <el-form
        ref="formRef"
        :rules="{
          sequence: [
            {
              required: true,
              type: 'number',
              message: '请输入数字类型',
              trigger: 'change',
            },
          ],
        }"
        :model="form"
      >
        <el-form-item label="修改序号" label-width="80px" prop="sequence">
          <el-input
            v-model.number="form.sequence"
            placeholder="请输入要修改的序列号"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isVisble = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import PageHeader from '@/components/PageHeader'
  import PaginationTable from '@/components/PaginationTable'
  import {
    orgPersonList,
    changeStatus,
    changSequence,
  } from '@/api/modules/orgPerson.js'
  import { onActivated, reactive, ref, nextTick } from '@vue/runtime-core'
  import { ElMessageBox, ElLoading } from 'element-plus'
  import { useRouter } from 'vue-router'
  import moment from 'moment'
  export default {
    components: { PaginationTable, PageHeader },
    name: 'orgPersonnelList',
    setup() {
      const router = useRouter()
      const pageData = reactive({
        listData: [],
        search: { pageIndex: 1, pageSize: 5, orderType: 2 },
      })

      async function loadData(params) {
        const res = await orgPersonList(params)
        res.data = res.data.map((item) => {
          item['statusTitle'] = item.status === 0 ? '禁用' : '启用'
          return item
        })
        pageData.listData = res
      }

      const paginaChange = function (params) {
        console.log('params.orderType =' + params.orderType)
        console.log('typeof params.orderType =' + typeof params.orderType)
        pageData.search.pageIndex = params.current
        pageData.search.pageSize = params.pageSize
        pageData.search.orderType = params.orderType === 1 ? 2 : 3
        loadData(pageData.search)
      }

      function searchData(params) {
        pageData.search.name = params.value1
        pageData.search.status = params.value3
        pageData.search.startDay = params.value2.start
          ? moment(params.value2.start).format('YYYY-MM-DD')
          : null
        pageData.search.endDay = params.value2.end
          ? moment(params.value2.end).format('YYYY-MM-DD')
          : null
        loadData(pageData.search)
      }

      // dialog 相关
      const isVisble = ref(false)
      const formRef = ref(null)
      const form = reactive({ sequence: null, userId: 0 })
      const onSubmit = function () {
        formRef.value.validate(async (valid) => {
          if (valid) {
            let loading = ElLoading.service({
              fullscreen: true,
              background: 'rgba(0, 0, 0, 0.8)',
            })
            changSequence({ id: form.userId, sequence: form.sequence })
            await nextTick()
            loading.close()
            isVisble.value = false
            loadData(pageData.search)
          }
        })
      }
      // 事件处理
      const ptable = ref(null)
      const resetSeach = function () {
        pageData.search = { pageIndex: 1, pageSize: 5, orderType: 2 }
        loadData(pageData.search)
        ptable.value.clearData()
      }
      const add = function () {
        router.push({ name: 'personnelInfo' })
      }

      const edit = function (row) {
        router.push({ name: 'personnelInfo', query: { id: row.id } })
      }

      const alert = function (title, cb) {
        ElMessageBox.confirm(title, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
        }).then(() => {
          if (cb) cb()
        })
      }
      const statuschange = function (row) {
        const str = row.status === 1 ? '禁用' : '启用'
        alert(`是否确定${str}该人员: ${row.doctorName}`, async () => {
          await changeStatus({ id: row.id, status: row.status === 1 ? 0 : 1 })
          loadData(pageData.search)
        })
        // TODO 刷新
      }

      const sequenceChange = function (row) {
        form.sequence = row.sequence
        form.userId = row.id
        isVisble.value = true
      }

      onActivated(() => {
        loadData(pageData.search)
      })
      return {
        pageData,
        searchData,
        add,
        edit,
        statuschange,
        resetSeach,
        paginaChange,
        ptable,
        isVisble,
        onSubmit,
        sequenceChange,
        form,
        formRef,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .orgList-container {
    margin: 32px;

    .orgList-content {
      background-color: white;
      overflow: hidden;

      .el-divider--horizontal {
        margin: 12px 2px;
      }
    }
  }
</style>
